import React, { Component } from 'react';
import "./login.scss"
export default class App extends Component {
state={
  mobile:"",//手机号
  msg_code:"",//验证码
  checked:false,//服务调框的选中状态
  error_msg:"", 
};

// handleMobileChange=(e) => {
//   let str = "mobile"
//   this.setState({
//     [str]:e.target.value,
//     // mobile:e.target.value,
//   });
// };
// // 处理短信验证码
// handleMsgChange=(e) => {
//   let str = "msg_code"
//   this.setState({
//     [str]:e.target.value,
//     // msg_code:e.target.value,
//   });
// };
handleChange=(e) => {
  let {type,key}=e.target.dataset;
  let value = "";
  if(type==="checkbox"){
    value= e.target.checked;
  }else{
    value = e.target.value;
  }
  this.setState({
    [key]:value,
  });
};
  // 处理我同意按钮的
  // handleCheckChange=(e) => {
  //   this.setState({
  //     checked:e.target.checked,
  //   });  
  // };

  validateMobile = (mobile ) => {
    if(!mobile){
      // 手机号码不能为空
      this.setState({
        error_msg:"手机号码不能为空",
      });
      return false;
    };
    if(!/^1[0-9]{10}$/.test(mobile)){
      this.setState({
        error_msg:"请输入正确的手机号",
      });
      return false;
   
    };
  }
  handleLogin=() => {
    console.log("手机号:",this.state.mobile);
    let mobile = this.state.mobile;
    let valid = this.validateMobile(mobile);
    if(!valid){
      return false;
    };
    console.log("验证码:",this.state.msg_code);
    console.log("服务条款:",this.state.checked);
  }
  render() {
    return (
      <div className="login">
        {/* 手机号 */}
        <div className="login-mobile">
          <input type="text"
          data-key="mobile"
          data-type="text"
          value={this.state.mobile}
          onChange = {this.handleChange}
          placeholder="请输入手机号"/>
        </ div>
        {/* 验证码 */}
        <div className="login-msg">
          <div className="login-msg-left">
            <input type="text" 
            data-type="number"
            data-key="msg_code"
            value={this.state.msg_code}
            onChange={this.handleChange}
            placeholder="请输入短信验证码"/>
          </div>
          <div className="login-msg-right">
            <div className="right-msg-btn">
              获取验证码
            </div>
          </div>
        </div>
        {/* 验证码结束 */}
        <div>
          {
            this.state.error_msg?<span className="error">{this.state.error_msg}</span>:""
          }
        </div>
        <div className="login-p">
          <div className="login-p-left">
            遇到问题？
          </div>
          <div className="login-p-right">
            使用密码验证登录
          </div>
        </div>
        {/* 登录按钮开始 */}
        <div className="login-btn">
          <div className="btn-title"
          onClick={this.handleLogin}>登录</div>
        </div>
        {/* 登录按钮结束 */}
        <div className="login-policy">
          <input type="checkbox" name="" id=""
          data-key="checked"
          checked={this.state.checked}
          onChange={this.handleChange}
          />
          <span>我同意{"<<"}</span><a href="#">服务条款</a>{">>"}<span>和{"<<"}</span><a href="#">网易隐私政策</a>{">>"}
        </div>
      </div>
    );
  }
}


